import React, { FC, useState, useEffect, useRef, useCallback, Component } from 'react'
import * as echarts from 'echarts'
let MyChart:any
interface Props {}
const Originaltem: FC<Props> = props => {
	const echartsDom:any = useRef()
	useEffect(() => {
		const dataColor = ['#FD6A4A', '#A484F8', '#517AFD', '#46CFFF', '#01C4A7', '#F9D854']
		MyChart = echarts.init(echartsDom.current)
		window.addEventListener('resize', function () {
			// console.log(123);
			MyChart.resize()
		})
		const option = {
			tooltip: {
				trigger: 'item',
			},

			series: [
				{
					name: '访问来源',
					type: 'pie',
					radius: ['20%', '40%'],
					avoidLabelOverlap: false,
					label: {
						show: true,
						position: 'outside',
						formatter: (record:any) => {
							return `${record.name} ${record.value}`
						},
					},
					labelLine: {
						show: true,
						length: 20,
					},
					emphasis: {
						label: {
							show: false,
							fontSize: '40',
							fontWeight: 'bold',
						},
					},
					data: [
						{ value: 1048, name: '搜索引擎' },
						{ value: 735, name: '直接访问' },
						{ value: 580, name: '邮件营销' },
						{ value: 484, name: '联盟广告' },
						{ value: 300, name: '视频广告' },
					].map((item, index) => ({
						value: item.value,
						name: item.name,
						itemStyle: {
							color: dataColor[index],
						},
					})),
				},
			],
		}

		option && MyChart.setOption(option)
		return () => {
			window.removeEventListener('resize', function () {
				MyChart.resize()
			})
		}
	}, [])
	return <div className='Originaltem' ref={echartsDom}></div>
}
export default Originaltem
